import echarts from 'echarts';
import doT from 'dot';
import templateWea from './WeatherBox.html';
import './WeatherBox.css';
import CityBox from './CityBox/CityBox.js';

export default class WeatherBox {
    constructor(domId, data, areaName, adcode) {
        this.container = document.getElementById(domId);
        this.boxContainer = document.createElement('div');
        this.boxContainer.className = 'weather-box-container';

        this.dealData(data);
        const htmlWea = doT.template(templateWea)(this.domData);
        this.boxContainer.innerHTML = htmlWea;
        this.container.appendChild(this.boxContainer);

        this.echartsContainer = document.createElement('div');
        this.echartsContainer.id = 'weather-box-echarts';
        this.container.appendChild(this.echartsContainer);
        this.echarts = echarts.init(this.echartsContainer);
        const option = {
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                borderWidth: 0,
                top: 20,
                bottom: 20
            },
            series: [{
                name: 'name1',
                type: 'line',
                data: this.echartsData.map((item) => {
                    return item[0]
                }),
                symbolSize: 8,
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: '#fff'
                    }
                }
            }, {
                name: 'name2',
                type: 'line',
                data: this.echartsData.map((item) => {
                    return item[1]
                }),
                symbolSize: 8,
                symbol: 'circle',
                label: {
                    normal: {
                        show: true,
                        fontSize: 12,
                        color: '#fff',
                        position: 'bottom'
                    }
                }
            }],
            lineStyle: {
                normal: {
                    shadowColor: 'rgba(225,225,225,0.6)',
                    shadowBlur: 3,
                    shadowOffsetY: 0,
                    shadowOffsetX: 0,
                    opacity: 1
                }
            },
            color: ['#FEC819', '#00EDFF'],
        }
        this.echarts.setOption(option);

        this.city = areaName;
        this.adcode = adcode;
        this.cityBoxDom = document.createElement('div');
        this.container.appendChild(this.cityBoxDom);
        this.cityBox = new CityBox(this.cityBoxDom, this.city);
    }

    dealData(data) {
        const dataObj = data.data.rows[0].data;
        const dataArr = [];
        const dataObjKeys = Object.keys(dataObj).sort();
        dataObjKeys.map((item, index) => {
            dataArr.push(dataObj[item]);
        });
        const dateToday = dataObjKeys[0];
        const date = new Date(dateToday.slice(0, 4), (parseInt(dateToday.slice(4, 6)) - 1), dateToday.slice(6, 8));               
        this.domData = {
            array: []
        };
        this.echartsData = [];
        const weatherIconArr = ['晴', '多云', '阴', '阵雨', '雷阵雨', '雷阵雨伴有冰雹', '雨夹雪', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '阵雪', '小雪', '中雪', '大雪', '暴雪', '雾', '冻雨', '沙尘暴', '小到中雨', '中到大雨', '大到暴雨', '暴雨到大暴雨', '大暴雨到特大暴雨', '小到中雪', '中到大雪', '大到暴雪', '浮尘', '扬沙', '强沙尘暴', '霾'];
        const windDirection = ['北风', '东北风', '东风', '东南风', '南风', '西南风', '西风', '西北风'];
        dataArr.map((item, index) => {
            this.echartsData.push([Math.round(Number(item.daytime.temp)), Math.round(Number(item.night.temp))]);
            const dateValue = getDateValue(date, index);
            const weatherDayIcon = 'd_' + (item.daytime.weather.length === 1 ? ('0' + item.daytime.weather) : item.weather);
            const weatherNightIcon = 'n_' + (item.night.weather.length === 1 ? ('0' + item.night.weather) : item.weather);
            this.domData.array.push({
                'week': dateValue[1],
                'date': dateValue[0],
                'weatherDayWord': weatherIconArr[parseInt(item.daytime.weather)],
                'weatherDayIcon': '../img/weather-icon/day/'+weatherDayIcon+'.png',
                'weatherNightIcon': '../img/weather-icon/night/'+weatherNightIcon+'.png',
                'weatherNightWord': weatherIconArr[parseInt(item.night.weather)],
                'windWord': windDirection[parseInt(parseInt(item.daytime.dd) / 45)],
                'windLevel': Number(item.daytime.ff_level) + '级'
            })
        })
    }

    setCityName(newName) {
        this.cityBox.setCityName(newName);
    }
}

function getDateValue(date, days) {
    const d = new Date(date);
    d.setDate(d.getDate() + days);
    const m = d.getMonth() + 1;
    const week = d.getDay();
    let weekStr = '';
    switch (week) {
        case 0:
            weekStr = '周日';
            break;
        case 1:
            weekStr = '周一';
            break;
        case 2:
            weekStr = '周二';
            break;
        case 3:
            weekStr = '周三';
            break;
        case 4:
            weekStr = '周四';
            break;
        case 5:
            weekStr = '周五';
            break;
        case 6:
            weekStr = '周六';
            break;
        default:
            break;
    }
    if (days === 0) {
        weekStr = '今天';
    }
    if (days === 1) {
        weekStr = '明天';
    }
    return [m + '/' + d.getDate(), weekStr];
}